<template>
  <div class="sys-pos-container">
    <el-dialog v-model="state.isShowDialog" draggable width="700px" :close-on-click-modal="false" @close="closeDialog">
      <template #header>
        <div style="color: #fff">
          <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
          </el-icon>
          <span> {{ props.title }} </span>
        </div>
      </template>
      <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
        <el-tag type="success" size="large">{{ props.regionName }}</el-tag>
        <!-- {{props.regionNum}} -->
        <el-button type="primary" icon="ele-Plus" @click="handleAllStorageOpen()" v-auth="'sysOrg:add'"
          style="margin-left: 20px;"> 添加库位
        </el-button>
        <!-- </el-form-item>
        </el-form> -->
        <!-- 当前库位信息列表 -->
        <el-table :data="state.currentChildrenData" style="width: 100%" row-key="id" default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="storageNum" label="库位编号" align="center" show-overflow-tooltip />
          <el-table-column prop="storageName" label="库位名称" header-align="center" align="center" show-overflow-tooltip />
          <el-table-column prop="storageOccupy" label="占用" width="70" align="center" show-overflow-tooltip>
            <template v-slot="scope">
              <el-tag type="success" v-if="scope.row.storageOccupy == 0">未占用</el-tag>
              <el-tag type="danger" v-else-if="scope.row.storageOccupy == 1">已占用</el-tag>
              <el-tag type="danger" v-else>预占用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="storageStatus" label="库位状态" width="70" align="center" show-overflow-tooltip>
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.storageStatus === 0">启用</el-tag>
              <el-tag type="danger" v-else>停用</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination v-model:current-page="state.queryParams.page" v-model:page-size="state.queryParams.pageSize"
        :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="state.totalTwo"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />

    </el-dialog>
    <AddStorage ref="allStorageRef" @refresh="getPaging" :regionNum="state.areaNo"></AddStorage>

  </div>
</template>

<script lang="ts" setup name="sysEditPos">
import { onMounted, reactive, ref, watch } from 'vue';
import { WmsApi } from '/@/api/wh';
import AddStorage from '/@/views/system/area/component copy/addStorage.vue';

const props = defineProps({
  title: String,
  regionName: String,
  regionNum: String
});
const emits = defineEmits(['refresh']);
const allStorageRef = ref()
const counter = ref(props.regionNum)
const state = reactive({
  isShowDialog: false,
  queryParams: {
    regionNum: '',
    regionName: '',
    page: 1,
    pageSize: 20,
  },
  currentChildrenData: [],
  totalTwo: 0,
  //当前页的区域编号
  areaNo: ''
});
onMounted(
  ()=>{
    //父组件更新 state.ruleForm.regionNum 后，Vue 需要一些时间来传播这个更新到子组件的 props。onMounted 钩子会在组件挂载后立即执行，这可能在 props 更新之前。这个子组件居然不是在点击才onMounted的，一开始点开父页面他就在了
    // setTimeout(()=>{
    //   console.log(props.regionNum);
    // },0)

    
  }
)
watch(() => props.regionNum, (newVal) => {  
  console.log("11111111111");
  
  console.log(newVal);  
  // 执行其他逻辑  
});
// 打开弹窗
const openDialog = async (row: any) => {
  state.areaNo = row.regionNum
  getPaging(row.regionNum);
  console.log(props.regionNum);
  console.log("222222222");
  // setTimeout(()=>{
  //     console.log(props.regionNum);
  //   },0)
  state.isShowDialog = true;
  // console.log(props.regionNum);
  // console.log(counter);
};
//请求得到当前区域下的所有库位
const getPaging = (id: string) => {
  WmsApi()
    .RegionAllStoragePost(id, state.queryParams.page, state.queryParams.pageSize)
    .then(function (res) {
      state.currentChildrenData = res.data.result.items;
      state.totalTwo = res.data.result.total;
    })
    .catch(function (error) { });
}

// 关闭弹窗
const closeDialog = () => {
  emits('refresh');
  state.isShowDialog = false;

};
//添加库位，调用子组件暴露的方法
const handleAllStorageOpen = () => {
  allStorageRef.value?.openDialog({ regionStatus: 0 });
}

const handleSizeChange = (val) => {
  console.log(props.regionNum);
  state.queryParams.pageSize = val;
  getPaging(state.areaNo)
};
const handleCurrentChange = (newVal) => {
  state.queryParams.page = newVal;
  getPaging(state.areaNo)
};
// 导出对象
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>

</style>